<template>
  <div class="product">
    <div>产品信息</div>
    <div class="ts" v-for="(item,index)  in arr" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.name}}</span>
    </div>
    <div class="di" @click="zk">{{is?'展开':'收起'}}</div>
  </div>
</template>

<script>
export default {
  name: "product",
  props: ["message"],
  data() {
    return {
      num: 9,
      arr: [],
      is: false,
    };
  },
  methods: {
    zk() {
      this.is = !this.is;
      if (this.is) {
        this.arr = JSON.parse(this.message).slice(0, 2);
      } else {
        this.arr = JSON.parse(this.message);
      }
    },
  },
  mounted() {
    // console.log(JSON.parse(this.message));
    this.zk();
  },
};
</script>

<style scoped>
.product {
  background-color: #ffffff;
  padding: 5px;
}

.product .ts:nth-child(2) {
  border-top: 1px solid #cccccc;
}

.ts {
  display: flex;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}

.ts span:nth-child(1) {
  width: 88px;
  height: 36px;
  line-height: 36px;
  text-align: center;
}

.ts span:nth-child(2) {
  flex: 1;
  border-left: 1px solid #cccccc;
  line-height: 36px;
  padding-left: 10px;
}

.di {
  height: 35px;
  line-height: 35px;
  text-align: center;
}
</style>